<template>
  <view :class="['status_bar2', 'vh100', { dark: theme == 'dark' }]">
    <!-- 头部状态栏 -->
    <view class="status_bar">
      <view class="top_view"></view>
    </view>
    <view class="header bgHeader fixed flex alcenter between plr15">
      <view
        class="flex alcenter"
        @click="drawShow = true"
      >
        <image
          :src="theme == 'dark' ? '/static/image/bars2.png' : '/static/image/bars.png'"
          class="h20 wt20"
        ></image>
        <text class="ft39 ml10 bold">{{ symbol }}</text>

        <image
          class="fallDrastically1"
          :src="
            change <= 0
              ? '../../static/image/fallDrastically1.png'
              : '../../static/image/fallDrastically2.png'
          "
        ></image>
        <text
          :class="[' radius2 p2  orange ft12', { ' green': change >= 0 }]"
          v-if="change"
          >{{ change | toFixed2 }} %</text
        >
      </view>
      <view>
        <image
          @tap="linkKline"
          :src="theme == 'dark' ? '/static/image/qushi2.png' : '/static/image/qushi1.png'"
          class="h20 wt20 wtop22"
        ></image>
      </view>
    </view>
    <view class="pt50 bgPart">
      <view class="flex between plr15 pb10 mt10">
        <view class="content-left flex1">
          <view class="content-left-header posRelt flex between">
            <view
              class="content-left-text flex1"
              :class="leverTradeType == 'buy' ? 'greenBg whitei' : ''"
              @tap="tradeType('buy')"
              >{{ $t('trade.buy') }}</view
            >
            <!-- <view class="bor abstrot"></view> -->
            <view
              class="content-left-text flex1"
              :class="leverTradeType == 'sell' ? 'greenBg whitei' : ''"
              @tap="tradeType('sell')"
              >{{ $t('trade.sell') }}</view
            >
          </view>
          <view class="flex alcenter between mt10 gray7">
           <!-- <view
              class="flex alcenter between bor1 flex2 h30 plr10"
              @tap="tradeTypes.shows = true"
            > -->
			<view class="flex alcenter between bor1 flex2 h30 plr10">
              <view class="">{{ priceStatus == 1 ? $t('trade.shi') : $t('trade.limit') }}</view>
              <!-- <image
                src="../../static/image/pull.png"
                mode="aspectFit"
                class="wt15 h15 ml10"
              ></image> -->
            </view>

            <!-- 限市价切换弹窗 -->

            <view class="flex1 h30 ml5">
              <!-- <view
                class="bor1 h30 flex alcenter between plr8"
                @tap="mults.shows = true"
              >
                <text>{{ leverOrder.mult }}</text>
                <image
                  src="../../static/image/pull.png"
                  mode="aspectFit"
                  class="gray7 wt15 h15 ml10"
                ></image>
              </view> -->
			  <text>{{ leverOrder.mult }}</text>
            </view>
          </view>
          <view class="bor1 h35 flex alcenter mt15 radius6 pl10 gray7">
            <input
              type="text"
              :class="priceStatus == 1 ? 'color1 input-uni' : 'input-uni'"
              v-model="priceValue"
              :disabled="priceStatus == 1 ? true : false"
            />
          </view>
          <!-- <view class="mt10 gray7"
            >{{ $t('bico.W441') }}{{ leverOrder.shareNUm | toFixed2
            }}{{ symbol.split('/')[0] }}</view
          > -->
          <!-- <view style="margin: 10upx 0 0 20upx">USDT{{ $t('trade.hands') }}</view> -->
          <view class="mt10 ft14 gray7">
            <view class="flex between alcenter mt10 gray7">
              <view class="bor1 h30 flex alcenter pl10 gray7">
                <input
                  type="digit"
                  v-model="leverOrder.share"
                  :placeholder="$t('trade.p_handnum')"
                  class="input-uni"
                />
              </view>
              <!-- <view
                class=""
                v-if="multShare.share && multShare.share.length > 0"
                @tap="shares.shows = true"
              > -->
			  <view
			    class=""
			    v-if="multShare.share && multShare.share.length > 0"
			  >
                <view class="bor1 h30 flex alcenter between plr8 ml5 gray7">
                  <text>{{ percentage.name }}</text>
                  <!-- <image
                    src="../../static/image/pull.png"
                    mode="aspectFit"
                    class="wt15 h15 ml10"
                  ></image> -->
                </view>
              </view>
            </view>
          </view>
          <view class="mt20 ft12 gray7"
            >{{ $t('trade.occupy') }}：{{ leverOrder.occupy }}{{ symbol.split('/')[1] }}</view
          >
          <view class="mt20 ft14 gray7"
            >{{ $t('trade.balance') }}：{{ leverBalance | toFixed2
            }}{{ symbol.split('/')[1] }}</view
          >
          <view
            class="btns h35 flex jscenter alcenter mt15 white"
            :class="leverTradeType == 'buy' ? 'greenBg' : 'bgRed'"
            @tap="submits"
            style="border-radius: 16upx"
          >
            <view class="flex1 tc">{{
              leverTradeType == 'buy' ? $t('trade.buy_duo') : $t('trade.sell_kong')
            }}</view>
          </view>
        </view>
        <view class="content-right flex flex1 column ml10">
          <view class="flex between gray4">
            <view class="">{{ $t('trade.pankou') }}</view>
            <view class="">{{ $t('trade.price') }}</view>
            <view class="">{{ $t('trade.num') }}</view>
          </view>

          <view
            class="flex1 flex column gray7 asks"
            v-if="ptype != 1"
          >
            <view
              v-for="(item, index) in sellList"
              :key="index"
              class="flex between flex1 alcenter gray7 asks"
              v-if="ptype == 0 ? index < 5 : index < 10"
              :style="'background-size:' + parseInt((item[1] / sellMax) * 100) + '% 100%'"
              @click="leverOrder.share = item[0]"
            >
              <view class="">{{ 5 - index }}</view>
              <view
                class="orange"
                style="font-size: 24upx"
                v-if="item[0] >= 0"
                >{{ item[0] | toFixed4 }}</view
              >
              <view
                class="orange"
                style="font-size: 24upx"
                v-else
                >{{ item[0] }}</view
              >
              <view v-if="item[1] >= 0">{{ item[1] | toFixed2 }}</view>
              <view v-else>{{ item[1] }}</view>
            </view>
          </view>
          <view>
            <view
              class="green"
              style="margin: 15upx 0; font-size: 36upx"
              @click="leverOrder.share = newPrice"
              >${{ newPrice | toFixed2 }}</view
            >
            <!-- <view class="mt5">≈{{ (newPrice * cny) | toFixed4 }}CNY</view> -->
          </view>
          <view
            class="flex1 flex column gray7 bids"
            v-if="ptype != 2"
          >
            <view
              v-for="(item, index) in buyList"
              :key="index"
              class="flex between flex1 alcenter"
              v-if="ptype == 0 ? index < 5 : index < 10"
              :style="'background-size:' + parseInt((item[1] / buyMax) * 100) + '% 100%'"
              @click="leverOrder.share = item[0]"
            >
              <view class="">{{ index + 1 }}</view>
              <view
                class="green"
                style="font-size: 24upx"
                v-if="item[0] >= 0"
                >{{ item[0] | toFixed4 }}</view
              >
              <view
                class="green"
                style="font-size: 24upx"
                v-else
                >{{ item[0] }}</view
              >
              <view v-if="item[1] >= 0">{{ item[1] | toFixed2 }}</view>
              <view v-else>{{ item[1] }}</view>
            </view>
          </view>

          <!-- 选择排列 -->
          <view class="trade-left flex column">
            <view class="flex alcenter">
              <view
                :class="['wt20 h20 flex alcenter jscenter radius2 bd3a', { bdActive: ptype == 0 }]"
                @click="ptype = 0"
              >
                <image
                  src="/static/image/pan1.svg"
                  mode=""
                  class="wt15 h15"
                ></image>
              </view>
              <view
                :class="[
                  'wt20 h20 flex alcenter jscenter radius2 bd3a ml5',
                  { bdActive: ptype == 1 }
                ]"
                @click="ptype = 1"
              >
                <image
                  src="/static/image/pan2.svg"
                  mode=""
                  class="wt15 h15"
                ></image>
              </view>
              <view
                :class="[
                  'wt20 h20 flex alcenter jscenter radius2 bd3a ml5',
                  { bdActive: ptype == 2 }
                ]"
                @click="ptype = 2"
              >
                <image
                  src="/static/image/pan3.svg"
                  mode=""
                  class="wt15 h15"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="bg2 h10"></view> -->
    <!-- 当前委托列表 -->
    <view class="lever-order ptb20 bgPart">
      <view class="flex between plr15">
        <view class="flex">
          <!-- 当前持仓 -->
          <!-- <image src="/static/image/dqwt.png" class="h20 wt20 ml5 tw70"></image> -->
          <view
            :class="['ft16', { blue4: current == 1 }]"
            @click="changeBang(1)"
            >{{ $t('trade.position') }}</view
          >
          <text style="margin-left: 6vw"></text>
          <!-- 当前委托 -->
          <!-- <image src="/static/image/dqwt.png" class="h20 wt20 ml5 tw70"></image> -->
          <view
            :class="['ft16', { blue4: current == 0 }]"
            @click="changeBang(0)"
            >{{ $t('trade.delegate') }}</view
          >
        </view>

        <view class="flex">
          <!-- <image src="/static/image/shuaxin.png" class="h20 wt20 ml5"></image>
					<view @click="reload" style="display: inline-block;font-size: 28upx;">刷新</view> -->

          <image
            @click="totalOrder"
            src="/static/image/pcjl.png"
            class="h20 wt20 ml5 tw70"
          ></image>
          <view
            @click="totalOrder"
            style="display: inline-block; font-size: 28upx"
            >{{ $t('trade.pingcangjilu')
            }}<!-- {{$t('bico.W442')}} --></view
          >
        </view>
      </view>

      <!-- 写入全部订单显示 -->

      <view
        class="flex between plr15"
        style="margin-top: 20upx"
      >
        <view class="flex">
          <radio-group @change="radioChange">
            <label class="ft16">
              <radio
                :value="allOrCurrent"
                :checked="allOrCurrent == 'ALL'"
                style="transform: scale(0.75)"
              ></radio>
              <text>{{ $t('bico.W710') }}</text>
            </label>

            <label class="ft16">
              <radio
                :value="allOrCurrent"
                :checked="allOrCurrent == 'CURRENT'"
                style="transform: scale(0.75)"
              ></radio>
              <text>{{ $t('bico.W711') }}</text>
            </label>
          </radio-group>
        </view>
        <view class="flex"
          ><view
            @click="closeTrade2"
            style="display: inline-block; margin-right: 30upx; color: #007aff; font-size: 28upx"
            >{{ current == 0 ? $t('bico.W692') : $t('bico.W693') }}</view
          >
        </view>
      </view>
      <view class="mt10">
        <view class="list">
          <view
            v-for="(item, index) in orderList"
            :key="index"
            class="plr15 bor5 mt10 pb10"
          >
            <view class="flex between mb10">
              <!-- 币种手数 -->
              <view class="">
                <text :class="item.compactType == 'BUY' ? 'green ft14' : 'red ft14'">{{
                  item.compactType == 'BUY' ? $t('trade.buy') : $t('trade.sell')
                }}</text>
                <text class="ml5">{{ item.symbols }}</text>
                <!-- 杠杆  {{$t('trade.hand')}}-->
                <text class="ml5">{{ item.leverName }}</text>
              </view>
              <!-- 价格浮动 -->
              <view :class="item.profitLoss < 0 ? 'red' : 'green'">
                {{ item.profitLoss }}({{ item.percentage }})
              </view>
            </view>

            <view class="flex between">
              <view class="flex1">
                <view class="">
                  <!-- 委托价格，平仓价 -->
                  <view class="">
                    {{ current == 0 ? $t('trade.delegate_price') : $t('trade.price_cang') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ current == 0 ? item.tradePrice : item.tradePrice || '0.0000' | toFixed2 }}
                  </view>
                </view>
                <view class="mt10">
                  <!--  -->
                  <view class="">
                    {{ $t('trade.price_zhiying') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ item.stopProfit || '0.00' | toFixed2 }}
                  </view>
                </view>
                <!-- <view class="mt10">
									<view class="">
										{{$t('trade.num_zhehe')}}
									</view>
									<view class="mt5 gray_e ft14">
										{{item.number || '0.0000' |toFixed2}}
									</view>
								</view> -->
              </view>
              <view class="mr10 flex1">
                <view class="">
                  <!-- 当前价 -->
                  <view class="">
                    {{ $t('trade.price_cur') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ item.unit || '0.0000' | toFixed2 }}
                  </view>
                </view>
                <view class="mt10">
                  <!-- 止损价 -->
                  <view class="">
                    {{ $t('trade.price_lose') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ item.stopLoss || '0.00' | toFixed2 }}
                  </view>
                </view>
                <!-- <view class="mt10">
									 可用保证金
									<view class="">
										{{$t('trade.can_money')}}
									</view>
									<view class="mt5 gray_e ft14">
										{{item.positionPrice || '0.0000' |toFixed2}}
									</view>
								</view> -->
              </view>
              <view class="mr10 flex1">
                <!-- 保证金 -->
                <view class="">
                  <view class="">
                    {{ $t('bico.W443') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ item.positionPrice || '0.0000' | toFixed2 }}
                  </view>
                </view>
                <!-- 保证金 -->
                <view class="mt10">
                  <view class=""> {{ $t('bico.W444') }}(U) </view>
                  <view class="mt5 gray_e ft14">
                    {{ Number(item.totalUsdtPrice) || '0.00' }}
                  </view>
                </view>
              </view>
              <view class="flex1 tr">
                <!-- 手续费 -->
                <view class="">
                  <view class="">
                    {{ $t('trade.fee') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ item.fee || '0.00' | toFixed2 }}
                  </view>
                </view>
                <!-- <view class="mt10">
                  <view class="">
                    {{ $t('bico.W445') }}
                  </view>
                  <view class="mt5 gray_e ft14">
                    {{ item.openHandPrice || '0.00' | toFixed2 }}
                  </view>
                </view> -->
              </view>
            </view>
            <view class="flex between mb10">
              <!-- 开仓时间 -->
              <view class="">
                <view class="mt10">
                  {{ $t('bico.W446') }}
                </view>
                <view class="mt5 gray_e ft14">
                  {{ item.createTime }}
                </view>
              </view>
            </view>
            <view class="flex between mb9">
              <view class="mt9">
                <view class="">
                  {{ $t('bico.W447') }}
                </view>
                <view class="mt5 gray_e ft14">
                  {{ item.orderNo }}
                </view>
              </view>
            </view>
            <!-- 按钮 -->
            <view class="flex tr mt15 jsend">
              <view
                class="ptb10 plr15 white ml10 mplow20"
                v-if="current == 1"
                @tap="closeTrade3(item)"
              >
                {{ $t('bico.W448') }} </view
              ><strong></strong>

              <view
                class="ptb10 plr15 white ml10 mplow21"
                v-if="current == 0"
                @tap="closeTrade(item, item.numbers)"
              >
                {{ $t('trade.chedan') }}
              </view>
              <view
                class="ptb10 plr15 white ml10 mplow21"
                v-if="current == 1 && symbol == item.symbols"
                @tap="closeTrade(item, item.numbers)"
              >
                {{ $t('trade.pingcang') }}
              </view>
            </view>
          </view>
        </view>
        <view
          class="tc mt40 pb20"
          v-if="orderList.length == 0"
        >
          <image
            src="/static/image/nodata.png"
            class="nodata"
          ></image>
          <view
            class="gray7"
            style="color: #bcc2cc; font-size: 12px; font-weight: 400"
            >{{ $t('home.norecord') }}</view
          >
        </view>
      </view>
    </view>
    <view class="bottom-space bgPart"></view>

    <!-- 头部左边币种列表内容 -->
    <view class="header-left">
      <uni-drawer
        :visible="drawShow"
        mode="left"
        @close="drawShow = false"
      >
        <scroll-view
          style="height: 100%"
          scroll-y="true"
        >
          <view class="tr mt10 mr10">
            <uni-icon
              size="30"
              type="arrowthinright"
              @tap="drawShow = false"
            ></uni-icon>
          </view>
          <view class="ft16 tc plr10">
            {{ $t('bico.W823') }}
          </view>
          <view>
            <view
              class="bor5"
              v-for="(item, index) in marketList"
              :key="index"
            >
              <view
                class="flex between plr10 ptb20"
                :class="symbol == item.symbol ? 'bg1' : ''"
                @tap="selectCurrency(item)"
              >
                <image
                  :src="item.img"
                  style="
                    width: 5vw;
                    height: 5vw;
                    margin-right: 0vw;
                    border-radius: 10vw;
                    position: relative;
                    top: 0vw;
                  "
                ></image>
                <view class="color1">{{ item.symbol }}</view>
                <view :class="item.rose < 0 ? 'red' : 'green'">{{ item.close | toFixed2 }}</view>
                <view :class="item.rose < 0 ? 'red' : 'green'">{{ item.rose | toFixed2 }}%</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </uni-drawer>
    </view>
    <!-- <u-modal v-model="showModal" :show-title='false' 
		 :cancel-text="cancelText"  :confirm-text="confirmText"
		 :content="title" @confirm="confirmBtn">
			 
		 </u-modal> -->
    <!-- 下单弹窗 -->
    <uni-popup
      :show="showModal"
      @hidePopup="hideBtn"
      @comfirmPopup="confirmBtn"
      :msg="title"
      :btnShow="tipbtnShow"
    >
      <view class="uni-common-mt show-content flex1">
        <view class="container ft14">
          <view class="">{{ symbol }}</view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('trade.types') }}</view>
            <view class="ft14">{{
              leverTradeType == 'buy' ? $t('trade.duo') : $t('trade.kong')
            }}</view>
          </view>
          <view class="flex between mt10">
            <view class="ft14">USDT{{ $t('trade.hands') }}</view>
            <view class="ft14">{{ leverOrder.share }}</view>
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('trade.times') }}</view>
            <view class="ft14">{{ leverOrder.mult }}</view>
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('trade.fee') }}</view>
            <view class="ft14">{{ leverOrder.fees }}</view>
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('trade.money') }}</view>
            <view class="ft14">{{ leverOrder.bonds }}</view>
          </view>
          <!-- <view class="mt10 lever-password bor6 ptb10 pl10 black_color">
									<input type="text" class="gray3 input-uni" password v-model="leverOrder.passwords" :placeholder="$t('login.e_pdeal')"/>
								</view> -->
        </view>
      </view>
    </uni-popup>
    <!-- 平仓弹窗 -->
    <uni-popup
      :show="closeTrades.closeTradeShow"
      @hidePopup="hideBtn"
      @comfirmPopup="comfirmClose"
      :msg="closeTrades.title"
    >
      <view
        class="uni-common-mt show-content flex1"
        style="height: 40%"
        v-if="current == 1"
      >
        <view class="container ft14">
          <view class="">
            <text :class="closeTrades.obj.compactType == 'BUY' ? 'green ft14' : 'red ft14'">{{
              closeTrades.obj.compactType == 'BUY' ? $t('trade.buy') : $t('trade.sell')
            }}</text>
            <text class="ml5">{{ closeTrades.obj.symbols }}</text>
            <!-- 杠杆  {{$t('trade.hand')}}-->
            <text class="ml5">{{ closeTrades.obj.leverName }}</text>
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('bico.W449') }}</view>
            <view class="ft14">{{ closeTrades.obj.tradePrice | toFixed2 }}</view>
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('bico.W450') }}</view>
            <view class="ft14">{{ newPrice | toFixed2 }}</view>
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('bico.W451') }}</view>
            <view
              class=""
              :class="closeTrades.obj.profitLoss > 0 ? 'green ft14' : 'red ft14'"
              >{{ closeTrades.obj.profitLoss | toFixed2 }}</view
            >
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('bico.W452') }}{{ $t('trade.hands') }}</view>
            <view class="ft14"
              >{{ $t('bico.W453') }} {{ closeTrades.obj.openHandPrice }}{{ symbol }}</view
            >
          </view>
          <!-- <view class="mt10 lever-password bor6 ptb10 pl10 black_color">
						<input type="digit" disabled="true" class="gray3 input-uni" v-model="closeTrades.number" :placeholder="$t('bico.W456')"/>
					</view> -->

          <!-- <view class="flex between mt10">
						 <view class="ft14">{{$t('bico.W4452')}}{{$t('trade.hands')}}</view> 
						<view class="ft14">{{ closeTrades.obj.closeNumber }}</view>
					</view> -->

          <view class="flex between mt10">
            <!-- <view class="ft14">{{$t('bico.W454')}}{{$t('trade.hands')}}{{ closeTrades.obj.numbers | toFixed2 }}</view> -->
            <view class="ft14">{{ $t('bico.W455') }}</view>
            <view class="ft14">{{ closeTrades.obj.fee | toFixed2 }}</view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 止盈止损弹窗 -->
    <uni-popup
      :show="closeTrades3.closeTradeShow"
      @hidePopup="hideBtn"
      @comfirmPopup="comfirmZhiYingZhiSun(closeTrades3)"
      :msg="closeTrades3.title"
    >
      <view class="uni-common-mt show-content flex1">
        <view class="container ft14">
          <view class="flex between mt10">
            <view class="ft14">{{ $t('bico.W457') }}</view>
          </view>
          <view class="mt10 lever-password bor6 ptb10 pl10 black_color">
            <input
              type="digit"
              class="gray3 input-uni"
              v-model="closeTrades3.zhiying"
              :placeholder="$t('bico.W459')"
            />
          </view>
          <view class="flex between mt10">
            <view class="ft14">{{ $t('bico.W458') }}</view>
          </view>
          <view class="mt10 lever-password bor6 ptb10 pl10 black_color">
            <input
              type="digit"
              class="gray3 input-uni"
              v-model="closeTrades3.zhisun"
              :placeholder="$t('bico.W460')"
            />
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 一键弹窗 -->
    <u-modal
      v-model="closeTrades2.closeTradeShow"
      :show-title="false"
      :cancel-text="cancelText"
      :confirm-text="confirmText"
      :content="closeTrades2.title"
      @confirm="comfirmClose2"
      showCancelButton
    ></u-modal>

    <!-- 交易类型 -->
    <uni-popup
      :show="tradeTypes.shows"
      @hidePopup="hideBtn"
      :btnShow="false"
      :type="tradeTypes.types"
      :="false"
      :bgColor="false"
    >
      <view class="uni-common-mt w100 gray7">
        <view
          class="flex1 ft14 w100 flex alcenter jscenter bdb_1e ptb15 bgPart"
          @tap="priceTab(1)"
          >{{ $t('trade.shi') }}</view
        >
        <view
          class="flex1 ft14 w100 flex alcenter jscenter bdb_1e ptb15 bgPart"
          @tap="priceTab(0)"
          >{{ $t('trade.limit') }}</view
        >
        <!-- <view class="flex1 ft14 w100  flex alcenter jscenter bdb_1e ptb15 bgPart" @tap.stop="hideBtn">{{$t('trade.cancel')}}</view> -->
      </view>
    </uni-popup>
    <!-- <uni-popup ref="pick" type="dialog"> -->
    <!-- <uni-popup-dialog type="input" title="确定操作" message="确定派单:" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog> -->
    <!-- </uni-popup> -->
    <!-- 倍数弹窗 -->
    <uni-popup
      :show="mults.shows"
      @hidePopup="hideBtn"
      :btnShow="false"
      :bgColor="false"
    >
      <view class="uni-common-mt w100 gray7">
        <view
          class="flex1 ft14 w100 flex alcenter jscenter bdb_1e ptb15 bgPart"
          v-for="(item, index) in multShare.muit"
          :key="index"
          @tap="selectmult(item)"
        >
          {{ item.name }}
        </view>
        <view
          class="flex1 ft14 w100 flex alcenter jscenter bdb_1e ptb15 bgPart"
          @tap.stop="hideBtn"
          >{{ $t('trade.cancel') }}</view
        >
      </view>
    </uni-popup>
    <!-- 手数弹窗 -->
    <uni-popup
      :show="shares.shows"
      @hidePopup="hideBtn"
      :btnShow="false"
      :bgColor="false"
    >
      <view class="uni-common-mt w100 gray7">
       <view
          class="flex1 ft14 w100 flex alcenter jscenter bdb_1e ptb15 bgPart"
          v-for="(item, index) in multShare.share"
          :key="index"
          @tap="selectShare(item)"
        >
          {{ item.name }}
        </view>
        <view
          class="flex1 ft14 w100 flex alcenter jscenter bdb_1e ptb15 bgPart"
          @tap.stop="hideBtn"
          >{{ $t('trade.cancel') }}</view
        >
      </view>
    </uni-popup>
    <view class="h50 bgPart"> </view>
  </view>
</template>

<script>
var socketInstance;
import { mapState, mapActions, mapGetters } from 'vuex';
import uniDrawer from '@/components/uni-drawer.vue';
import uniIcon from '../../components/uni-icon.vue';
import uniPopup from '@/components/uni-popup.vue';
import {
  huobiTicket,
  commonTradeList,
  spotcontractPage,
  spotcontract,
  contractList,
  cancelContract,
  outSpotContract,
  contractPl,
  commonContractConfig
} from '../../common/apiString.js';
export default {
  components: {
    uniDrawer,
    uniIcon,
    uniPopup
  },
  data() {
    return {
      cuStyle: {},
      contractOpen: 'N',
      contractFee: 0.0,
      contractMarketPrice: 0.0,
      confirmText: this.$t('login.c1'),
      cancelText: this.$t('login.c2'),

      ptype: 0,
      drawShow: false,
      getCompleteList: null,
      allOrCurrent: 'CURRENT',
      current: 1,
      isFinger: '0',
      leftStatus: false,
      legalId: '',
      legalIds: '',
      legalName: '',
      currencyId: '',
      currencyName: '',
      percentage: { name: '', value: 0 }, //百分比
      leverTradeType: 'buy', //永续交易类型
      multType: {}, //杠杆倍数类
      price_share: 1, //可交易最大手数    ，
      priceValue: this.$t('trade.best'), //价格  以当前最优价格交易
      priceStatus: 1, // 价格类型 1市价 0限价
      quotationList: [], //币种列表
      marketList: [], //交易对列表
      page: 1,
      symbol: '',
      legalIndex: 0,
      currencyIndex: 0,
      linkStatus: false, //no
      minShare: 0, //手数最小 no
      maxShare: 0, //手数最大 no
      leverOrder: {
        shareNUm: 0, //一手价值
        mult: 0, //杠杆
        share: '', //手数
        fee: '', //手续费百分比，整数
        spread: '', //费率
        fees: '', //手续费
        bonds: '', //保证金
        passwords: '', //密码 no
        marketPrice: '',
        occupy: ''
      },
      multShare: {
        share: [
          { name: '', value: 0 },
          { name: 'USDT', value: 1 }
        ],
        // share: [
        //   { name: '25%', value: '25' },
        //   { name: '50%', value: '50' },
        //   { name: '75%', value: '75' },
        //   { name: '100%', value: '100' }
        // ], //比例数组,// 手数列表
        muit: [] /* 杠杆倍数列表 */
      },
      leverBalance: '0', //永续合约余额
      buyMax: 0,
      sellMax: 0,
      sellList: [
        ['0.00', '0.00'],
        ['--', '--'],
        ['--', '--'],
        ['--', '--'],
        ['--', '--']
      ],
      buyList: [
        ['0.00', '0.00'],
        ['--', '--'],
        ['--', '--'],
        ['--', '--'],
        ['0.00', '0.00']
      ],
      newPrice: 0,
      updatePrice: 0.0, //最新价格
      cny: 1,
      change: '', //涨跌幅
      orderList: [],
      showModal: false,
      tipbtnShow: true,
      title: this.$t('trade.confrim_order'),
      // 平仓弹窗
      closeTrades: {
        number: 0,
        closeTradeShow: false,
        obj: {},
        title: '',
        orderId: ''
      },
      //一键弹窗
      closeTrades2: {
        closeTradeShow: false,
        title: ''
      },
      //止盈止损
      closeTrades3: {
        zhiying: 0,
        obj: {},
        zhisun: 0,
        closeTradeShow: false,
        title: '',
        orderId: ''
      },
      tradeTypes: {
        shows: false,
        types: 'bottom'
      },
      mults: {
        shows: false,
        types: 'center'
      },
      shares: {
        shows: false,
        types: 'center'
      },
      symbol: 'GHJ/USDT'
    };
  },
  filters: {
    toFixed2: function (value) {
      value = Number(value);
      return value.toFixed(3);
    },
    toFixed4: function (value) {
      value = Number(value);
      return value.toFixed(4);
    },
    isNumber: function (value) {
      var regPos = /^\d+(\.\d+)?$/;
      return regPos.test(value);
    }
  },
  watch: {
    newPrice(val) {
      console.log('jiage', val);
      this.orderList.forEach(element => {
        var arr = this.marketList;
        var coin = element.symbols;
        arr.filter(function (item) {
          if (coin == item.symbol) {
            element.unit = item.close; //当前价
            var num = '';
            if (element.compactType == 'BUY') {
              num = Number(element.unit) - Number(element.tradePrice);
            } else if (element.compactType == 'SELL') {
              num = Number(element.tradePrice) - Number(element.unit);
            }
            var handNum = Number(element.numbers) * Number(element.handNumber);
            element.profitLoss = (handNum * num).toFixed(2);

            //持仓盈亏百分比 = 盈亏额 / (持仓手数 * 每手价值数量 *建仓价格) * 100%
            element.percentage =
              ((element.profitLoss / (handNum * Number(element.tradePrice))) * 100).toFixed(2) +
              '%';
          }
        });
      });
    },
    priceValue(val) {
      var regPos = /^\d+(\.\d+)?$/;
      if (!val) {
        this.priceValue = 0;
      }
      this.calculation_share();
      //console.log(this.priceValue)
    },
    leverOrder: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        console.log('leverOrder.handler: ' + val, oldVal);
        this.calculation(1);
        //this.calculation_share()
      },
      share(val, oldVal) {
        //this.percentage.value=1
        console.log('leverOrder.share: ' + val.share, oldVal.share);
      },

      deep: true //true 深度监听
    }
  },
  onLoad(e) {
    // if(uni.getStorageSync('token')&&!uni.getStorageSync('isFinger')){
    // 	this.isFinger = uni.getStorageSync('fingerBool')
    // 	if(this.isFinger){
    // 		uni.hideTabBar()
    // 	}
    // }
    this.changeFooter();
    var that = this;
    uni.setNavigationBarTitle({
      title: this.$t('bico.W462')
    });
    // if (e.legalId) {
    // 	that.legalId = e.legalId;
    // 	that.currencyId = e.currencyId;
    // 	that.linkStatus = true;
    // uni.getStorageSync('token', 'bc3aac867b2a3e239d9639bf6a687071');
    // }
  },
  onPullDownRefresh() {
    this.init();
  },
  onShow() {
    var that = this;

    console.log(this.theme);
    if (this.theme == 'dark') {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#041525'
      });
    } else {
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#3e38ec'
      });
    }
    //this.$utils.setTheme(this.theme == 'dark'?'light':'dark');
    //this.$utils.setTheme(this.theme);
    if (uni.getStorageSync('klineSymbol')) {
      this.symbol = uni.getStorageSync('klineSymbol');
      uni.removeStorageSync('klineSymbol');
    }
    this.initList();
    this.getcommonContractConfig();
    //this.handicap();
    var that = this;
    setInterval(function () {
      that.init();
      that.handicap();
    }, 2000);
  },
  onHide() {
    //this.$socket.closeSocket(socketInstance);
    clearInterval(this.getCompleteList);
  },
  created() {},
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  beforeDestroy() {},
  methods: {
    radioChange(evt) {
      var that = this;
      if (evt.target.value == 'ALL') {
        that.allOrCurrent = 'CURRENT';
      } else {
        that.allOrCurrent = 'ALL';
      }
      that.getOrderList();
    },
    changeBang(num) {
      var that = this;
      that.current = num;
      that.getOrderList();
    },
    getOrderType() {
      var that = this;
      if (that.current == 0) {
        return 'IN';
      } else {
        return 'N';
      }
    },
    getDeBuySellArr(al) {
      if (al == 1) {
        this.buyList = [
          ['0.00', '0.00'],
          ['--', '--'],
          ['--', '--'],
          ['--', '--'],
          ['--', '--']
        ];
      }
      if (al == 2) {
        this.sellList = [
          ['0.00', '0.00'],
          ['--', '--'],
          ['--', '--'],
          ['--', '--'],
          ['0.00', '0.00']
        ]; //，卖盘
      }
    },
    fingerFuc() {
      var that = this;
      if ('Android' == plus.os.name) {
        this.type = 'fingerAlert'; //兼容Android平台
      }
      if (plus.fingerprint.isSupport()) {
        if (!plus.fingerprint.isEnrolledFingerprints()) {
          plus.nativeUI.toast('当前设备未录入指纹！');
          // if(that.isLang==0){
          // 	plus.nativeUI.toast('当前设备未录入指纹！');
          // }else{
          // 	plus.nativeUI.toast('Current device does not enter fingerprints.');
          // }
        }
        plus.fingerprint.authenticate(
          function (e) {
            // if(that.isLang==0){
            // 	plus.nativeUI.toast('指纹匹配成功');
            // }else{
            // 	plus.nativeUI.toast('Fingerprint Matching Successfully');
            // }
            if ('Android' == plus.os.name) {
              that.type = ''; //兼容Android平台
            }
            uni.setStorageSync('isFinger', true);
            that.isFinger = 0;
            uni.showTabBar();
          },
          function (e) {
            plus.nativeUI.toast('指纹匹配失败');
            // if(that.isLang==0){
            // 	plus.nativeUI.toast('指纹匹配失败');
            // }else{
            // 	plus.nativeUI.toast('Fingerprint Matching Failure');
            // }
            if ('Android' == plus.os.name) {
              that.type = ''; //兼容Android平台
              plus.fingerprint.cancel();
            }
          },
          {
            message: '授权登录'
          }
        );
      } else {
        plus.nativeUI.toast('此设备不支持指纹设置！');
        // if(that.isLang==0){
        // 	plus.nativeUI.toast('此设备不支持指纹设置！');
        // }else{
        // 	plus.nativeUI.toast('This device does not support fingerprint settings');
        // }
      }
    },
    fingerCancel() {
      this.type = '';
      plus.fingerprint.cancel();
    },
    changeFooter() {
      uni.setTabBarItem({
        index: 0,
        text: this.$t('tabBar.index')
      });
      uni.setTabBarItem({
        index: 1,
        text: this.$t('tabBar.business')
      });
      uni.setTabBarItem({
        index: 2,
        text: this.$t('tabBar.perpetual')
      });
      uni.setTabBarItem({
        index: 3,
        text: this.$t('tabBar.agreements')
      });
      uni.setTabBarItem({
        index: 4,
        text: this.$t('tabBar.mine')
      });
    },
    shows() {
      return;
    },
    init() {
      let that = this;
      this.$utils.initData({ url: huobiTicket, data: { type: 3 }, type: 'post' }, (res, msg) => {
        this.marketList = res;
        res.forEach((item, index) => {
          if (item.symbol == this.symbol) {
            this.change = item.rose;
            this.newPrice = item.close;
          }
        });
      });
    },
    getcommonContractConfig() {
      let that = this;
      this.$utils.initData({ url: commonContractConfig, type: 'post' }, (res, msg) => {
        that.contractOpen = res.contractOpen;
        that.contractFee = res.contractFee;
        that.contractMarketPrice = res.contractMarketPrice;
      });
    },
    initList() {
      let that = this;
      this.$utils.initData({ url: huobiTicket, data: { type: 1 }, type: 'post' }, (res, msg) => {
        this.marketList = res;

        if (res.length > 0) {
          var a = null;
          res.forEach(item => {
            if (item.symbol == this.symbol) {
              a = item;
            }
          });
          that.selectCurrency(a == null ? res[0] : a);
        }
      });
    },
    deals() {
      var that = this;
      that.$utils.initDataToken(
        {
          url: spotcontractPage,
          type: 'get',
          data: { symbols: that.symbol, coin: that.symbol.split('/')[1] }
        },
        res => {
          //that.multShare = res.multiple;
          // that.buyList = res.lever_transaction.in;
          // that.sellList = res.lever_transaction.out;
          // that.minShare = res.lever_share_limit.min;
          // that.maxShare = res.lever_share_limit.max;
          //that.cny = (res.ExRate-0)*(res.ustd_price);
          //that.newPrice = res.last_price;
          //console.log(res)
          //杠杆倍数列表
		  console.log(22278,res)
          that.multShare.share[0].name = that.symbol.split('/')[0];
          that.percentage.name = that.symbol.split('/')[0];
          that.percentage.value = 0;
          that.multShare.muit = res.leverageList;
			  console.log(333,res.leverageList.length)
          if (res.leverageList.length > 0) {
            that.multType = res.leverageList[0];
            that.leverOrder.mult = res.leverageList[0].name;
          }
          that.leverOrder.shareNUm = res.handNumber;
          that.leverOrder.spread = res.openFeePrice;
          that.leverOrder.fee = res.openFeePrice;
          // if(res.multiple.share.length > 0){
          that.leverOrder.share = 0.1;
          // }
          //that.orderList = res.my_transaction;
          that.getOrderList();
          that.leverBalance = res.price;
          that.calculation_share();
        }
      );
    },
    getOrderList() {
      var that = this;
      var data = {
        type: that.getOrderType(), //N 持仓，IN 委托
        current: that.page,
        size: 10,
        showMethod: that.allOrCurrent, //ALL显示全部，CURRENT 当前的币种
        symbols: this.symbol,
        buyMethod: '',
        status: '',
		contractList:1,
		contractType:1
      };

      that.$utils.initDataToken({ url: contractList, type: 'get', data: data }, res => {
		  console.log(345,res)
        //debugger
        var that = this;
        var obj = res.records;
        that.orderList = [];
        obj.forEach(element => {
          var arr = this.marketList;
          var coin = element.symbols;
          arr.filter(function (item) {
            if (coin == item.symbol) {
              element.unit = item.close; //当前价
            }
          });
          element.positionPrice = Number(element.positionPrice).toFixed(2); //持仓、委托保证金
          element.lossProfit = Number(element.lossProfit).toFixed(2); //lossProfit

          element.tradePrice = Math.round(element.tradePrice * 100) / 100; //开仓价

          element.exitFeeRatio = Number(element.exitFeeRatio).toFixed(2); //平仓手续费率
          element.fee = Number(element.fee).toFixed(2); //建仓手续费
          // 	    element.stopProfit == '' ?  element.stopProfit = '--' : element.stopProfit = Number(element.stopProfit).toFixed(2);//止盈
          // 	    element.stopLoss == '' ?  element.stopLoss = '--' : element.stopLoss = Number(element.stopLoss).toFixed(2);//止损

          //买入盈亏额 = 持仓价值数量（手数X每手价值）* (当前价 - 建仓价)
          //卖出盈亏额 =  持仓价值数量（手数X每手价值）* (建仓价 - 当前价)

          var num = '';
          if (element.compactType == 'BUY') {
            num = Number(element.unit) - Number(element.tradePrice);
          } else if (element.compactType == 'SELL') {
            num = Number(element.tradePrice) - Number(element.unit);
          }
          var handNum = Number(element.numbers) * Number(element.handNumber);
          element.profitLoss = (handNum * num).toFixed(2);

          //持仓盈亏百分比 = 盈亏额 / (持仓手数 * 每手价值数量 *建仓价格) * 100%
          element.percentage =
            ((element.profitLoss / (handNum * Number(element.tradePrice))) * 100).toFixed(2) + '%';

          that.orderList.push(element);
        });

        // that.orderList.forEach(element => {
        // 	var arr = that.marketList;
        // 	var coin = element.symbols;
        // 	arr.filter(function(item){
        // 	    if(coin == item.symbol){
        // 	        element.unit = item.close;//当前价
        // 	    }
        // 	})
      });
    },
    reload() {
      this.deals();
    },
    // 交易类型切换
    tradeType(vals) {
      var that = this;
      that.leverTradeType = vals;
      that.leverOrder.share = '';
      that.calculation_share();
    },
    // 价格类型切换
    priceTab(vals) {
      var that = this;
      that.priceStatus = vals;
      that.tradeTypes.shows = false;
      if (vals == 1) {
        that.priceValue = this.$t('trade.best');
      } else {
        that.priceValue = (that.newPrice - 0).toFixed(2);
      }
    },
    selectmult(vals) {
      var that = this;
      that.multType = vals;
      that.leverOrder.mult = vals.name;
      that.calculation_share();
      that.mults.shows = false;
    },
    // 选择手数
    selectShare(vals) {
      var that = this;
      that.percentage.name = vals.name;
      that.percentage.value = vals.value;
      that.calculation_share();
      //that.leverOrder.share = that.leverOrder.shareNUm*vals.value/100;
      that.shares.shows = false;
    },
    sliderShare(e) {
      var that = this;
      that.leverOrder.share = e.detail.value;
    },
    // 计算手数
    calculation_share() {
      var that = this;
      var prices = 0;
      //现价市价
      if (that.priceStatus == 0) {
        prices = parseFloat(that.priceValue);
      } else {
        prices = parseFloat(that.newPrice);
      }
      console.log(this.$t('bico.W463'), +prices);
      //手续费
      var spreadPrices = parseFloat((prices * that.leverOrder.spread) / 100);
      var pricesTotal = prices;
      // if (that.leverTradeType == 'sell') {
      // 	//卖出占用
      // 	pricesTotal = parseFloat(prices - spreadPrices);
      // } else {
      // 	//买入占用
      // 	pricesTotal = parseFloat(prices + spreadPrices);
      // }
      //杠杆
      var multNumber = parseFloat(that.leverOrder.mult.replace('x', '')).toFixed(2);
      console.log('multNum', multNumber);
      //手数
      var shareNum = parseFloat(that.leverOrder.shareNUm); //每手数量
      //屏幕的数量
      //that.leverOrder.share
      var totalPrice = parseFloat(pricesTotal * that.leverOrder.share * shareNum); //保证金

      // 手数 = （可用余额*比例*杠杆）/（委托价格*每手价值数量+委托价格*每手价值数量*开仓手续费率*杠杆）

      // if (that.contractOpen == 'Y') {
      //   var step1 = (Number(that.leverBalance) * Number(that.percentage.value)) / 100;

      //   var step = Number(that.contractFee) + Number(that.contractMarketPrice);
      //   that.leverOrder.share = Math.floor(step1 / step / shareNum);
      // } else {
      //   // var step1 =
      //   //   ((Number(that.leverBalance) * Number(that.percentage.value)) / 100) * multNumber;
      //   // var step2 = pricesTotal * shareNum;

      //   // var step3 = ((step2 * that.leverOrder.fee) / 100) * multNumber;
      //   // var step = Number(step2) + Number(step3);
      //   if (Number(that.percentage.value) == 100) {
      //     that.leverOrder.share = Number(that.leverBalance);
      //   } else {
      //     that.leverOrder.share = Number(that.leverBalance) * (that.percentage.value / 100);
      //   }
      // }
      that.leverOrder.share = '';

      // var total_x = pricesTotal * x * shareNum / multNumber + pricesTotal * x * shareNum * that.leverOrder.fee / 100;
      // var total_x = that.leverBalance
      // var x = total_x / (pricesTotal * shareNum  / multNumber + pricesTotal * shareNum * that.leverOrder.fee / 100);
      // x = Math.floor(x)
      // console.log('xxxx',x)
      // that.price_share = x

      //委托占用 （仓位保证金+开仓手续费）
      that.calculation(pricesTotal);
      // that.leverOrder.bonds = parseFloat((totalPrice - 0) /multNumber).toFixed(2)
      // that.leverOrder.fees = parseFloat((totalPrice * that.leverOrder.fee) / 100).toFixed(2);//合约市值
      // that.leverOrder.occupy = (Number(that.leverOrder.bonds) + Number(that.leverOrder.fees)).toFixed(2);
      // that.leverOrder.marketPrice = parseFloat(pricesTotal * that.leverOrder.share * shareNum).toFixed(2);
    },
    // 下单计算 参数价格
    calculation(prices) {
      //debugger
      // 价格+或者-点差  * 手数 * 每手数量  /倍数
      var that = this;
      //var spreadPrices = parseFloat((prices * that.leverOrder.spread) / 100);
      var pricesTotal = prices;
      //现价市价
      if (that.priceStatus == 0) {
        pricesTotal = parseFloat(that.priceValue);
      } else {
        pricesTotal = parseFloat(that.newPrice);
      }
      //一、仓位保证金  (委托手数*委托价格/杠杆倍数)
      //二、开仓手续费 （委托手数*委托价格*开仓手续费率）
      //三、委托占用 （仓位保证金+开仓手续费）
      if (that.contractOpen != 'Y') {
        var multNumber = parseFloat(that.leverOrder.mult.replace('x', ''));
        var shareNum = parseFloat(that.leverOrder.shareNUm); //每手数量
        let share = that.leverOrder.share;
        share = share / pricesTotal;
        // var totalPrice = parseFloat(pricesTotal * share * shareNum); //保证金/

        if (that.percentage.value == 1) {
          that.leverOrder.bonds = parseFloat(that.contractMarketPrice * share).toFixed(3);
          that.leverOrder.fees = parseFloat(that.contractFee * share).toFixed(3); //合约市值
        } else {
          let ar = (that.leverOrder.share * pricesTotal) * multNumber;
          that.leverOrder.bonds = ar;
          that.leverOrder.fees = parseFloat(that.contractFee * share).toFixed(3); //合约市值
        }
        // that.leverOrder.bonds = parseFloat((totalPrice - 0) / multNumber).toFixed(3);
        // that.leverOrder.fees = parseFloat((totalPrice * that.leverOrder.fee) / 100).toFixed(3); //合约市值
      } else {
        if (that.percentage.value == 1) {
          that.leverOrder.bonds = parseFloat(that.contractMarketPrice * share).toFixed(3);
          that.leverOrder.fees = parseFloat(that.contractFee * share).toFixed(3); //合约市值
        } else {
          let ar = (that.leverOrder.share * pricesTotal) / multNumber;
          that.leverOrder.bonds = ar;
          that.leverOrder.fees = parseFloat(that.contractFee * share).toFixed(3); //合约市值
        }
      }

      that.leverOrder.marketPrice = parseFloat(
        that.leverOrder.bonds + that.leverOrder.fees
      ).toFixed(2);

      that.leverOrder.occupy = (
        Number(that.leverOrder.bonds) + Number(that.leverOrder.fees)
      ).toFixed(3);
    },
    // 下单
    submits() {
      var that = this;

      if (!that.leverOrder.mult) {
        that.$utils.showLayer(this.$t('trade.p_times'));
        return false;
      }
      if (!that.leverOrder.share) {
        that.$utils.showLayer(this.$t('trade.p_hands'));
        return false;
      }
      if (that.priceStatus == 0) {
        //console.log(that.priceValue,123)
        if (!that.priceValue || that.priceValue == 0) {
          that.$utils.showLayer(this.$t('trade.p_delprice'));
          return false;
        } else {
          that.calculation(that.priceValue);
        }
      } else {
        that.calculation(that.newPrice);
      }
      // if(that.leverOrder.share < that.minShare){
      // 	that.$utils.showLayer(this.$t('trade.p_notless')+that.minShare);
      // 	return false;
      // }
      // if(that.leverOrder.share > that.maxShare){
      // 	that.$utils.showLayer(this.$t('trade.p_notmore')+that.maxShare);
      // 	return false;
      // }
      that.showModal = true;
      that.shows = false;
      that.leverOrder.passwords = '';
      //console.log(123)
      return;
    },
    // 取消弹窗
    hideBtn() {
      var that = this;
      that.showModal = false;
      that.closeTrades.closeTradeShow = false;
      that.shows = true;
      that.tradeTypes.shows = false;
      that.mults.shows = false;
      that.shares.shows = false;
      that.closeTrades2.closeTradeShow = false;
      that.closeTrades3.closeTradeShow = false;
    },
    // 确定下单
    confirmBtn() {
      var that = this;
      // if (!that.leverOrder.passwords) {
      // 	that.$utils.showLayer(this.$t('login.e_pdeal'));
      // 	return false;
      // }
      var prices = 0;
      if (that.priceStatus == 0) {
        prices = parseFloat(that.priceValue);
      } else {
        prices = parseFloat(that.newPrice);
      }
      that.showModal = false;
      var dto = {
        symbols: that.symbol,
        unit: prices,
        numbers: that.leverOrder.share,
        compactType: that.leverTradeType == 'buy' ? 'BUY' : 'SELL',
        dealWay: that.priceStatus == 1 ? 'MARKET' : 'LIMIT',
        leverageId: that.multType.id,
        coin: 'USDT',
        buyType: that.percentage.name == 'USDT' ? 'USDT' : 'COIN'
      };
      that.$utils.initDataToken(
        {
          url: spotcontract,
          type: 'get',
          data: dto
        },
        res => {
          that.$utils.showLayer(res);
          that.getOrderList();
          // setTimeout(function() {
          // 	if(that.priceStatus == 0){
          // 		uni.navigateTo({
          // 			url: 'leverList'
          // 		});
          // 	}else{
          // 		uni.navigateTo({
          // 			url: 'orderList?legalId='+that.legalId+'&currencyId='+that.currencyId
          // 		});
          // 	}

          // }, 2000);
        }
      );
    },
    // 选择OTC
    selectedLegal(ids) {
      var that = this;
      that.legalIds = ids;
      for (var i = 0; i < that.quotationList.length; i++) {
        if (that.quotationList[i].id == ids) {
          that.legalIndex = i;
        }
      }
    },
    // 选择交易对
    selectCurrency(options) {
      var that = this;
      // that.$socket.closeSocket(socketInstance);
      // that.legalName = options.legal_name;
      // that.legalId = options.legal_id;
      // that.currencyId = options.currency_id;
      // that.currencyName = options.currency_name;
      // that.leverOrder.shareNUm = options.lever_share_num;
      // that.leverOrder.spread = options.spread;
      // that.leverOrder.fee = options.lever_trade_fee;
      // that.legalIds = options.legal_id;
      // debugger
      that.leftStatus = false;
      this.drawShow = false;
      this.symbol = options.symbol;
      this.newPrice = options.close;
      this.change = options.rose;
      var data = {
        symbol: that.symbol
      };
      uni.setStorageSync('leverOrder', JSON.stringify(data));
      that.handicap();
      that.deals();
    },
    getPrice() {
      //帮助用户筛选最新的交易价
      // this.newPrice = (this.type=='buy') ?
      // this.sellList[this.sellData.length-1][0]
      // :
      // this.buyList[0][0] ;
      //this.last_price = this.price
      //更新钱包余额数据
      //this.currencyDetail(this.getBuySellCoin())
      //}
    },
    // 平仓弹窗
    closeTrade(obj, number) {
      var that = this;
      that.closeTrades.obj = obj;
      that.closeTrades.orderId = obj.compactId;
      that.closeTrades.number = number;
      that.closeTrades.closeTradeShow = true;
      that.closeTrades.title = that.current == 0 ? this.$t('bico.W465') : this.$t('bico.W466');
      that.shows = false;
    },
    // 平仓弹窗
    closeTrade4(obj) {
      var that = this;
      that.closeTrades.orderId = obj.compactId;
      that.closeTrades.number = number;
      that.closeTrades.closeTradeShow = true;
      that.closeTrades.title = that.current == 0 ? this.$t('bico.W465') : this.$t('bico.W466');
      that.shows = false;
    },
    //止盈止损弹窗
    closeTrade3(obj) {
      var that = this;
      that.closeTrades3.orderId = obj.compactId;
      that.closeTrades3.obj = obj;
      that.closeTrades3.closeTradeShow = true;
      that.closeTrades3.title = this.$t('bico.W467');
      that.shows = false;
    },
    //一键弹窗
    closeTrade2() {
      //num == 2 一键操作  否则 撤销操作
      var that = this;
      //that.closeTrades.orderId = ids;
      that.closeTrades2.closeTradeShow = true;
      that.closeTrades2.title = that.current == 0 ? this.$t('bico.W468') : this.$t('bico.W469');
      that.shows = false;
    },
    //确定止盈止损
    comfirmZhiYingZhiSun(obj) {
      var that = this;
      //止盈>=建仓价
      // var j = obj.obj.tradePrice;
      // if(obj.zhiying < j){
      // 	that.$utils.showLayer("止盈价需要>=建仓价");
      // 	return
      // }
      // if(obj.zhisun >= j){
      // 	that.$utils.showLayer("止损价需要<建仓价");
      // 	return
      // }
      if (obj.zhiying == undefined) {
        that.$utils.showLayer(this.$t('bico.W470'));
        return;
      }
      if (obj.zhisun == undefined) {
        that.$utils.showLayer(this.$t('bico.W471'));
        return;
      }
      var dto = {
        compactId: obj.orderId,
        stopProfit: obj.zhiying,
        stopLoss: obj.zhisun
      };
      var url = contractPl;
      that.$utils.initDataToken(
        {
          url: url,
          type: 'get',
          data: dto
        },
        res => {
          that.$utils.showLayer(this.$t('bico.W472'));
          setTimeout(function () {
            that.closeTrades3.orderId = '';
            that.closeTrades3.zhisun = 0;
            that.closeTrades3.zhiying = 0;
            that.closeTrades3.closeTradeShow = false;
            that.deals();
          }, 2000);
        }
      );
    },
    // 确定平仓
    comfirmClose() {
      var that = this;
      that.closeTrades.closeTradeShow = false;
      console.log(that.closeTrades.orderId);
      var url = that.current == 0 ? cancelContract : outSpotContract;
      that.$utils.initDataToken(
        {
          url: url,
          type: 'get',
          data: {
            compactId: that.closeTrades.orderId,
            type: 1,
            number: that.closeTrades.number
          }
        },
        res => {
          that.$utils.showLayer(this.$t('bico.W472'));
          setTimeout(function () {
            that.closeTrades.orderId = '';
            that.deals();
          }, 2000);
        }
      );
    },
    // 一键操作平仓   type 2 all  type 1选定
    comfirmClose2() {
      var that = this;
      that.closeTrades2.closeTradeShow = false;
      var url = that.current == 0 ? cancelContract : outSpotContract;
      that.$utils.initDataToken(
        {
          url: url,
          type: 'get',
          data: {
            //compactId: that.closeTrades.orderId,
            type: 2,
            number: that.closeTrades.number
          }
        },
        res => {
          that.$utils.showLayer(this.$t('bico.W472'));
          setTimeout(function () {
            //that.closeTrades.orderId = '';
            that.deals();
          }, 2000);
        }
      );
    },
    // 跳转k线
    linkKline() {
      var that = this;
      var symbols = that.symbol;
      uni.navigateTo({
        url: '/pages/market/kline?type=0&symbol=' + symbols
      });
    },
    // 跳转合约订单记录
    linkLever() {
      var that = this;
      uni.navigateTo({
        url: 'leverList'
      });
    },
    // 跳转全部委托
    totalOrder() {
		console.log(33345)
      var that = this;
      uni.navigateTo({
        url:
          'orderList?legalId=' +
          that.legalId +
          '&currencyId=' +
          that.currencyId +
          '&contractType=' +
          1
      });
    },
    bindChange() {},
    // 盘口socket 深度
    handicap() {
      let that = this;
      this.$utils.initData(
        { url: commonTradeList, data: { symbol: that.symbol, type: 0 }, type: 'post' },
        (res, msg) => {
          //uni.stopPullDownRefresh();
          that.buyList = [];
          that.sellList = [];
          //debugger
          var buyArr = [];
          var buyArrObj = res.bids; //买单
          var sellArrObj = res.asks; //卖单

          if (buyArrObj != undefined && buyArrObj.length > 0) {
            buyArrObj.sort(function (x, y) {
              return y[1] - x[1];
            });
            for (var i in buyArrObj) {
              that.buyList.push(buyArrObj[i]);
            }
            that.buyMax = buyArrObj[0][1];
            that.buyList = that.buyList.slice(0, 11);

            // var buyNum =  that.buyList.slice(0,4);
            that.buyList.sort(function (x, y) {
              return y[0] - x[0];
            });

            //that.last_price = buyNum[0][0];
          } else {
            this.getDeBuySellArr(1);
          }

          if (sellArrObj != undefined && sellArrObj.length > 0) {
            sellArrObj.sort(function (x, y) {
              return y[1] - x[1];
            });
            // debugger
            that.sellMax = sellArrObj[0][1];
            for (var i in sellArrObj) {
              that.sellList.push(sellArrObj[i]);
            }
            var newArr = that.sellList.slice(0, 11);
            newArr.sort(function (x, y) {
              return y[0] - x[0];
            });

            that.sellList = newArr;
            // var sellNum =  newArr.slice(0,4);
            // that.sellList.sort(function(x,y){
            //     return y[1]-x[1]
            // })
            //that.sell_price = sellNum[0][1];
          } else {
            this.getDeBuySellArr(2);
          }
          this.getPrice();
        }
      );
    }
  }
};
</script>

<style>
.status_bar {
  height: 60upx;
  width: 100%;
}
page {
  background-color: #ffffff;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}
.content-left-header {
  height: 70upx;
  overflow: hidden;
}
.content-left-text {
  height: 70upx;
  line-height: 70upx;
  color: #828181;
  background: #f7f7fb;
  text-align: center;
}
.bor {
  margin-top: -30px;
  display: inline-block;
  width: 16px;
  height: 100px;
  left: calc(50% - 10px);
  background: #ffffff;
  /*transform: rotate(25deg);
		-ms-transform: rotate(25deg);
		-moz-transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		-o-transform: rotate(25deg);*/
}
.p2 {
  padding: 0 4upx;
}
.dwbg {
  background: rgba(250, 82, 82, 0.1);
}
.upbg {
  background: rgba(18, 184, 134, 0.1);
}
.asks > view {
  background-image: linear-gradient(rgba(250, 82, 82, 0.1), rgba(250, 82, 82, 0.1));
}
.bids > view {
  background-image: linear-gradient(rgba(18, 184, 134, 0.1), rgba(18, 184, 134, 0.1));
}
.asks > view,
.bids > view {
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
}
.content-left-price {
  height: 72upx;
  line-height: 72upx;
  text-align: center;
}
.show-content {
  width: 88%;
}
.lever-password {
}
.twd30 {
  width: 8vw;
  height: 8vw;
}
.ft39 {
  font-size: 4vw;
  font-weight: bold;
}

.ft14 {
  font-size: 14px;
  font-weight: 400;
}
uni-view {
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
}
.pb10 {
  padding-bottom: 150px;
}
.pt5 {
  padding-top: 0px;
}
.pb10 {
  padding-bottom: 0.5vw;
}
.ft18 {
  font-size: 14px;
}
.pl45 {
  padding-left: 10vw;
}
.tw70 {
  position: relative;
  top: 0.5vw;
  right: 0vw;
  left: -1vw;
}

.ft16 {
  font-size: 14px;
}
.status_bar {
  height: 6vw;
  width: 100%;
}
.wt50 {
  width: 34px;
  height: 38px;
}
.uni-radio .uni-radio-input {
  -webkit-appearance: none;
  appearance: none;
  margin-right: 10px;
  outline: 0;
  border: 1px solid #2196f3;
  background-color: #fff;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  position: relative;
}
.header {
  height: 80px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9998;
}

.blue4 {
  transition-duration: 0.1s;
  border-bottom: 2px solid #2979ff;
  color: #2979ff;
}

.mplow20 {
  height: 30px;
  line-height: 10px;
  font-size: 12px;
  background: #0066ed;
  border-radius: 4px;
  float: left;
}
.mplow21 {
  height: 30px;
  line-height: 10px;
  font-size: 12px;
  background: #ff5722;
  border-radius: 4px;
  float: left;
}
.nodata {
  width: 160upx;
  height: 180upx;
}
.fallDrastically1 {
  width: 32upx;
  height: 32upx;
  margin: 0 5upx 0 10upx;
}

.orange {
  color: #ff5f49;
  font-weight: bold;
}

.green {
  color: #4fcf6b;
  font-weight: bold;
}

.greenBg {
  background: #4fcf6b;
  border-radius: 16upx;
}
</style>
